<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Project</title>
    <link href="/css/base/style.css" rel="stylesheet" type="text/css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/css/base/elastislide.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- jQuery -->
    <script src="/js/base/jquery.min.js"></script>
    <script type="text/javascript" src="/js/base/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="/js/base/jquery.elastislide.js"></script>
    <script type="text/javascript" src="/js/base/gallery.js"></script>
    <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
			<div class="rg-image-wrapper">
				{{if itemsCount > 1}}
					<div class="rg-image-nav">
						<a href="#" class="rg-image-nav-prev">Previous Image</a>
						<a href="#" class="rg-image-nav-next">Next Image</a>
					</div>
				{{/if}}
				<div class="rg-image"></div>
				<div class="rg-loading"></div>
				<div class="rg-caption-wrapper">
					<div class="rg-caption" style="display:none;">
						<p></p>
					</div>
				</div>
			</div>

    </script>
    <!-- Add fancyBox main JS and CSS files -->
    <script src="/js/base/jquery.magnific-popup.js" type="text/javascript"></script>
    <link href="/css/base/magnific-popup.css" rel="stylesheet" type="text/css">
    <script>
        $(document).ready(function () {
            $('.popup-with-zoom-anim').magnificPopup({
                type: 'inline',
                fixedContentPos: false,
                fixedBgPos: true,
                overflowY: 'auto',
                closeBtnInside: true,
                preloader: false,
                midClick: true,
                removalDelay: 300,
                mainClass: 'my-mfp-zoom-in'
            });
        });
    </script>
    <style>
        .rg-image img{
            width: 520px;
            height: 450px;
        }

    </style>
</head>
<body>
<div th:insert="~{common ::#header}"></div>
<div class="banner">
    <div class="wrap">
        <h2>Project</h2>
        <div class="clear"></div>
    </div>
</div>
<div class="main">
    <div class="project-wrapper">
        <div class="project">
            <div class="project-slider">
                <div id="rg-gallery" class="rg-gallery">
                    <div class="rg-thumbs">
                        <!-- Elastislide Carousel Thumbnail Viewer -->
                        <div class="es-carousel-wrapper">
                            <div class="es-nav">
                                <span class="es-nav-prev">Previous</span>
                                <span class="es-nav-next">Next</span>
                            </div>
                            <div class="es-carousel">
                                <ul>

                                    <li th:each="img : ${imgs}">
                                        <a>
                                            <img style="width: 100px; height: 100px;" th:src="${img}" th:data-large="${img}" alt="image01"/>
                                        </a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                        <!-- End Elastislide Carousel Thumbnail Viewer -->
                    </div><!-- rg-thumbs -->
                </div><!-- rg-gallery -->
            </div>
            <div class="project-bottom">
                <div class="proj-desc">
                    <h4>团级详细描述</h4>
                    <div class="clear"></div>
                    <p>详细描述信息</p>
                </div>
                <div class="related-desc">
                    <h4>最近上传的记录</h4>
                    <div class="clear"></div>
                </div>
                <div class="gallery">
                    <ul>
                        <li th:each="recent : ${recentTeam}">
                            <a class="popup-with-zoom-anim" th:href="'/page/ourTeamDetail.html?teamNum=' + ${recent.getTeamNumber()}" >
                                <img style="width: 335px;height: 221px;" th:src="${recent.getTeamImgUrl()}" alt=""/>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="project-sidebar">
            <div class="project-list">
                <h4>团级项目概览</h4>
                <ul>
                    <li><img src="/images/arrow.png" alt="">
                        <p><a th:text="'简单描述：'+ ${team.simpleDesc}"></a></p>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <img src="/images/arrow.png" alt="">
                        <p><a th:text="'参加人数：' + ${team.peopleCount}"></a></p>
                        <div class="clear"></div>
                    </li>
                    <li><img src="/images/arrow.png" alt="">
                        <p><a th:text="'地点：' + ${team.place}"></a></p>
                        <div class="clear"></div>
                    </li>
                    <li><img src="/images/arrow.png" alt="">
                        <p><a th:text="'时间：' +${#dates.format(team.createTime,'yyyy年MM月dd日 HH:mm')}"></a></p>
                        <div class="clear"></div>
                    </li>

                    <li><img src="/images/arrow.png" alt="">
                        <p><a th:text="'主发起人：' + ${team.getTeamInitiator()}"></a></p>
                        <div class="clear"></div>
                    </li>
                </ul>
            </div>
            <div class="project-list1">
                <h4>最受欢迎的记录</h4>
                <ul>
                    <li th:each="popular:${popularTeam}">
                        <img style="width: 100px; height: 47px;" th:src="${popular.getTeamImgUrl()}" alt="">
                        <p>
                            <a href="#" th:text="${popular.simpleDesc}"></a>
                        </p>
                        <span class="likes">
                            <span class="link">
                                <a href="#" th:text="${#dates.format(popular.createTime,'yyyy年MM月dd日 HH:mm')}"></a>
                            </span>
                            <img src="/images/heart.png" title="likes" alt="" th:text="${popular.getTeamLikeNum()}"/>
                        </span>
                        <div class="clear"></div>
                    </li>

                </ul>
            </div>
            <div class="project-list2">
                <h4>Tags</h4>
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Html5</a></li>
                    <li><a href="#">Wordpress</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Wordpress</a></li>
                    <div class="clear"></div>
                </ul>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div th:insert="~{common :: #footer}"></div>
</body>
</html>    		
             		
      	   		                                                                                            